<!--
 * @Author: your name
 * @Date: 2020-04-14 14:07:25
 * @LastEditTime: 2020-06-11 18:36:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\enterprise\troubleDetail.vue
 -->
<template>
  <div class="app-container">
    <el-form class="form-container">
      <div class="createPost-main-container">
        <fieldset class="fieldInfo">
          <legend>
            <span>隐患基本信息</span>
          </legend>
          <div class="createPost-main-container baseInfo">
            <el-row>
              <el-col :span="24">
                <div class="postInfo-container">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="所属公司:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.companyName}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="隐患级别:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.strDangerLevel}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="发现日期:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.discoverDate}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="115px"
                        label="隐患描述:"
                        class="postInfo-container-item contentLength"
                      >{{this.troubleDetail.dangerContent}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="115px"
                        label="隐患照片:"
                        class="postInfo-container-item"
                      >
                        <ele-gallery
                          :source="this.troubleDetail.dangerAppendixObjs"
                          :height="100"
                          :width="100"
                        ></ele-gallery>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="整改类型:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.strdangerRecitfyType}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        :label="this.troubleDetail.dangerRecitfyType==2?'整改期限':'整改时间'"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.recitfyOverdate}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="115px"
                        label="整改要求:"
                        class="postInfo-container-item contentLength"
                      >{{this.troubleDetail.recitfyRequirement}}</el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
        </fieldset>
        <fieldset class="fieldInfo">
          <legend>
            <span>整改/复查情况表</span>
          </legend>
          <div style="overflow:auto;">
            <ul
              style="list-style-type:none;"
              v-if="this.troubleDetail.rectifyAndReview&&this.troubleDetail.rectifyAndReview.length>0"
            >
              <li v-for="(item,index) in this.troubleDetail.rectifyAndReview" :key="index">
                <div v-if="item.type==1">
                  <!-- 整改详情 -->
                  <div class="createPost-main-container listInfo">
                    <el-row>
                      <el-col :span="24">
                        <div class="postInfo-container cardBg">
                          <el-row>
                            <el-col :span="12">
                              <el-form-item
                                label-width="115px"
                                label="整改人:"
                                class="postInfo-container-item"
                              >{{item.companyDangerRectify.recitfyPerson}}</el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item
                                label-width="115px"
                                label="整改日期:"
                                class="postInfo-container-item"
                              >{{item.companyDangerRectify.recitfyDate}}</el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="整改后照片:"
                                class="postInfo-container-item"
                              >
                                <ele-gallery
                                  :source="handlePics2(item.companyDangerRectify.recitfyAppendixObjs)"
                                  :height="75"
                                  :width="75"
                                ></ele-gallery>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="整改内容:"
                                class="postInfo-container-item contentLength"
                              >{{item.companyDangerRectify.recitfyContent}}</el-form-item>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>

                <div v-else>
                  <!-- 复查详情 -->
                  <!-- <el-form class="form-container"> -->
                  <div class="createPost-main-container listInfo">
                    <el-row>
                      <el-col :span="24">
                        <div class="postInfo-container cardBg">
                          <el-row>
                            <el-col :span="12">
                              <el-form-item
                                label-width="115px"
                                label="复查人:"
                                class="postInfo-container-item"
                              >{{item.companyDangerReview.reviewPerson}}</el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item
                                label-width="115px"
                                label="复查日期:"
                                class="postInfo-container-item"
                              >{{item.companyDangerReview.reviewDate}}</el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="复查照片:"
                                class="postInfo-container-item"
                              >
                                <ele-gallery
                                  :source="handlePics2(item.companyDangerReview.reviewAppendixObjs)"
                                  :height="75"
                                  :width="75"
                                ></ele-gallery>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="复查内容:"
                                class="postInfo-container-item contentLength"
                              >{{item.companyDangerReview.reviewContent}}</el-form-item>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <!-- </el-form> -->
                </div>
                <el-divider></el-divider>
              </li>
            </ul>
            <p v-else style="text-align:center">尚无数据显示</p>
          </div>
        </fieldset>
      </div>
    </el-form>
  </div>
</template>
<script>
import { validURL, validUsername } from '@/utils/validate'
import { fetchTroubleDetail } from '@/api/troubles'
import EleGallery from 'vue-ele-gallery'
import path from 'path'
export default {
  created() {
    const id = this.$route.params && this.$route.params.id
    this.getTroubleDetail(id)
    // if (this.isEdit) {
    //   //如果是编辑数据
    //   const id = this.$route.params && this.$route.params.id
    //   // this.fetchUserData(id)
    // }
    this.tempRoute = Object.assign({}, this.$route)
  },
  // props: {
  //   isEdit: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  components: {
    EleGallery
  },
  data() {
    return {
      // imgfileList: [],
      troubleDetail: {},
      dialogImageUrl: '',
      dialogVisible: false,
      loading: false
      // pics: [
      //   'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      //   'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
      //   'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
      // ]
    }
  },
  methods: {
    handlePics2(pics) {
      return pics.map((p) => {
        return {
          title: p.name,
          src: `/api${p.url}`
        }
      })
    },
    getTroubleDetail(id) {
      //如果直接正式提交
      fetchTroubleDetail({
        dangerId: id,
        pType: 2
      }).then((response) => {
        this.troubleDetail = response.data
        // console.log('***********', this.troubleDetail)
        this.troubleDetail.dangerAppendixObjs = this.troubleDetail.dangerAppendixObjs.map(
          (obj) => {
            return {
              id: obj.id,
              title: obj.name,
              // src: path.join('/api/image', obj.url)
              src: `/api${obj.url}`
            }
          }
        )
        // console.log(this.troubleDetail.dangerAppendixObjs)
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.baseInfo /deep/ .el-form-item {
  margin-bottom: 0;
}
.listInfo /deep/ .el-form-item {
  margin-bottom: 0;
}
.fieldInfo {
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 20px;
  legend {
    color: #666;
  }
}
.cardBg {
  background-color: #eee;
}
.contentLength {
  width: 600px;
  word-break: break-all;
}
</style>
